<template>
  <!-- <div style="position: relative;"> -->

    <!-- 回顶 -->
    <div class="top" v-show="showGoTop" @click="goToTop">       
          <van-icon name="arrow-up" style="color:gainsboro"/>
          <p class="back">TOP</p>
    </div>
  <!-- </div> -->
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      showGoTop: false,
    };
  },
  mounted() {
    // 第一步，绑定一个滚动事件，当滚动的距离达到浏览器窗口的内部高度的时候(大概一个屏幕的高度吧)
    //         就让回到顶部的小盒子显示出来
    window.addEventListener("scroll", this.handleScroll,true); // 这里加上true是为了保证浏览器滚动的及时性
  },
  methods: {
    // 滚动事件的回调函数
    handleScroll() {
      let scrolltop = document.documentElement.scrollTop; // 获取当前页面的滚动条纵坐标位置 
      // console.log("看看滚动了多高的距离",scrolltop);
      // console.log(window.innerHeight);
      if(scrolltop > window.innerHeight){  // 浏览器窗口的内部高度 window.innerHeight
        this.showGoTop = true // 超过就显示出来
      }else{
        this.showGoTop = false // 不超过还藏起来
      }
    },
    // 第二步，当用户点击回到顶部小盒子的时候，仍然获取所在的页面的滚动条纵坐标位置,
    //         使用定时器让页面滚动条的坐标位置递减，这样就能实现平滑过渡的效果
    goToTop() {
      let scrolltop = document.documentElement.scrollTop; // 获取当前页面的滚动条纵坐标位置 
      // 定时器平滑滚动
      const time = setInterval(() => {
        document.documentElement.scrollTop = scrolltop -= 40;
        if (scrolltop <= 0) {  // 定时器要及时清除掉，要不然一直执行很恐怖的
          clearInterval(time);
        }
      }, 10);
    },
  },
};
</script>

<style scoped>
.top{
  height: 40px;
  width: 40px;
  position: fixed;
  right: 12vw;
  /* bottom: 0; */
  /* text-align: center; */
  /* line-height: 35px; */
  /* font-size: 25px; */
  text-align: center;
  background-color: white;
  color: black;
  border-radius: 600px;
  box-shadow: 0px 0px 4px 4px #888888;
  z-index: 99999;
 } 
</style>